<template>
  <div class="noticeContent">
    <div class="title">
      <div class="line"></div>
      <div class="name">{{ manage ? "通知管理" : "通知内容" }}</div>
      <div class="btn" v-if="!manage" @click="manage = true">返回</div>
    </div>
    <div class="main" v-if="manage">
      <div class="noticeList">
        <div class="noticeCard" v-for="(item, index) in noticeList" @click="handleNotice(item)" :key="index">
          <div class="name">{{ item.title }}</div>
          <div class="userInfo">
            <div class="userName">通知人：{{ item.creatorName }}</div>
            <div class="time">{{ item.createTime.replace('T', ' ') }}</div>
            <!-- <div :class="['state', item.state == '0' ? 'noRead' : 'read']">
              {{ item.state == "0" ? "未读" : "已读" }}
            </div> -->
          </div>
          <div class="contentText">{{ item.content.slice(0, 80) }}</div>
        </div>
      </div>

      <CommonPagination @sizeChange="sizeChange" @currentChange="currentChange" :page="pageInfo"></CommonPagination>
    </div>
    <div class="main noticeMain" v-else>
      <div class="name">{{ curNotice.title }}</div>
      <div class="noticeInfo">
        <div class="userName">{{ curNotice.creatorName }}</div>
        <div class="time">{{ curNotice.createTime.replace('T', ' ') }}</div>
      </div>
      <div class="content">{{ curNotice.content }}</div>
      <div class="files">
        附件列表：
        <span class="file" v-for="(file, index) in curNotice.fileList" @click="handleDown(file)">{{ file.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getTablePage } from "@/api/noticeManage"
import { viewMinix } from "@/minix/viewMinix.js";

export default {
  mixins: [viewMinix],

  components: {
  },
  data() {
    return {
      curRow: {},
      changeDialogShow: true,
      manage: true, //是否是管理页面
      curNotice: {},
      noticeList: [

        {
          name: "通知标题",
          time: "2021-12-16 10:23",
          user: "李教练",
          content: "通知内容通知内容通知内容内容通知内容",
          state: "0", //0未读，1已读
          files: "abc.word",
        },
        {
          name: "通知标题",
          time: "2021-12-16 10:23",
          user: "李教练",
          content: "通知内容通知内容通知内容内容通知内容",
          state: "1", //0未读，1已读
        },
        {
          name: "通知标题",
          time: "2021-12-16 10:23",
          user: "李教练",
          content: "通知内容通知内容通知内容内容通知内容",
          state: "1", //0未读，1已读
        },
        {
          name: "通知标题",
          time: "2021-12-16 10:23",
          user: "李教练",
          content: "通知内容通知内容通知内容内容通知内容",
          state: "0", //0未读，1已读
        },
        {
          name: "通知标题",
          time: "2021-12-16 10:23",
          user: "李教练",
          content: "通知内容通知内容通知内容内容通知内容",
          state: "1", //0未读，1已读
        },
      ],
    };
  },
  created() {
    this.action = process.env.VUE_APP_ASSETSURL
    this.getTableData()
  },
  methods: {
    handleDown(item) {
      const fileUrl = `${this.action}${item.previewProxyAddress}`.replace('\\', '/');
      const link = document.createElement('a');
      link.href = fileUrl;
      link.download = 'R-C.jpg'; // 文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    sizeChange(val) {
      this.pageInfo.pageSize = val
      this.getTableData()
    },
    /**
     *更改页码
     * @param val
     */
    currentChange(val) {
      this.pageInfo.pageNum = val
      this.getTableData()

    },
    handleNotice(item) {
      console.log(item);

      this.curNotice = item;
      this.manage = false;
    },
    async getTableData() {
      let data = {
        page: {
          ...this.pageInfo
        },
        param: {

        }
      }
      const res = await getTablePage(data)
      if (res.code == 200) {
        this.noticeList = res.data.records
        this.pageInfo.total = res.data.total * 1
      }
    },
  },
};
</script>

<style lang="less" scoped>
.noticeContent {
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 10px;
    padding-left: 30px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 15px;

    .line {
      height: 20px;
      background-color: #fc7414;
      width: 6px;
      margin-right: 10px;
    }

    .btn {
      margin-left: auto;
      width: 60px;
      height: 30px;
      font-size: 16px;
      font-weight: normal;
      color: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fc6c09;
      cursor: pointer;
    }
  }

  .noticeMain {
    display: flex;
    flex-direction: column;

    .name {
      font-weight: 700;
      font-size: 26px;
      text-align: center;
    }

    .noticeInfo {
      display: flex;
      justify-content: center;

      .userName {
        color: #8c8c8c;
        margin-right: 20px;
      }

      .time {
        color: #8c8c8c;
        height: 21px;
        padding-top: 4px;
      }
    }

    .content {
      background-color: #fff;
      flex: 1;
    }

    .files {
      display: flex;
      align-items: center;
      flex-direction: column;

      span {
        color: #fc6c09;
        cursor: pointer;
        margin-bottom: 4px;
      }
    }
  }

  .main {
    /* flex: 1; */
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
    height: calc(100vh - 189px);
    overflow-y: auto;

    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
    .noticeList {
      flex: 1;
    }

    .noticeCard {
      width: 100%;
      height: 200px;
      margin-bottom: 15px;
      border-radius: 15px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
      overflow: hidden;
      cursor: pointer;
      padding: 15px;
      display: flex;
      flex-direction: column;

      .name {
        font-size: 24px;
        color: #333;
      }

      .userInfo {
        display: flex;
        align-items: center;
        margin-top: 5px;

        .userName {
          color: #8c8c8c;
          margin-right: 9px;
        }

        .time {
          color: #8c8c8c;
          height: 21px;
          padding-top: 4px;
        }

        .state {
          margin-left: 10px;
          border-radius: 3px;
          width: 50px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          user-select: none;
        }

        .noRead {
          background-color: #fe6a62;
        }

        .read {
          background-color: #32b682;
        }
      }

      .contentText {
        flex: 1;
        margin-top: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
